<template>
    <div>
       <mu-appbar style="width: 100%;"  color="primary" title="个人信息">
               <mu-button icon slot="left" to="/Person">
              <mu-icon value="arrow_back"></mu-icon>
              </mu-button>
              <mu-button flat slot="right" @click="setU()"><mu-icon value="edit" ></mu-icon></mu-button>
       </mu-appbar>
       

        <mu-list>
<mu-list-item button :ripple="false">
      <mu-list-item-title>头像</mu-list-item-title>
      <mu-list-item-action>
       <img :src="avatar" style="height:40px;width;50px">
       </mu-list-item-action>
    </mu-list-item>
    <mu-divider></mu-divider>
    <mu-list-item button :ripple="false">
      <mu-list-item-title>用户名</mu-list-item-title>
      <mu-list-item-action>
       {{username}}
      </mu-list-item-action>
    </mu-list-item>
    <mu-divider></mu-divider>
    <mu-list-item button :ripple="false">
      <mu-list-item-title>昵称</mu-list-item-title>
      <mu-list-item-action>
       {{name}}
      </mu-list-item-action>
    </mu-list-item>
    <mu-divider></mu-divider>
    <mu-list-item button :ripple="false">
      <mu-list-item-title>性别</mu-list-item-title>
      <mu-list-item-action>
       {{sex}}
      </mu-list-item-action>
    </mu-list-item>
    <mu-divider></mu-divider>
    <mu-list-item button :ripple="false">
      <mu-list-item-title>手机</mu-list-item-title>
      <mu-list-item-action>
       {{phone}}
      </mu-list-item-action>
    </mu-list-item>
    <mu-divider></mu-divider>
        <mu-list-item button :ripple="false">
      <mu-list-item-title>所属高校</mu-list-item-title>
      <mu-list-item-action>
       {{cname}}
      </mu-list-item-action>
    </mu-list-item>
    <mu-divider></mu-divider>
  </mu-list> 
       <div v-if="set"> 
           <mu-button color="success" round  @click="resetavatar()">
            <mu-icon left value="star"></mu-icon>
            修改头像
            </mu-button>
                <mu-dialog title="修改头像" width="360" :open.sync="openSimple">
                    
                         <el-upload
                        class="avatar-uploader"
                        :action= domain
                        :http-request = upqiniu
                        :show-file-list="false"
                        :before-upload="beforeUpload">
                        <img v-if="avatar" :src="avatar" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>

                <mu-button slot="actions" flat color="primary" @click="closeSimpleDialog">Close</mu-button>
                </mu-dialog>
            <mu-button color="success" round @click="resetname()">
            <mu-icon left value="people" ></mu-icon>
            修改昵称
            </mu-button>
            <mu-button color="success" round  @click="resetphone()">
            <mu-icon left value="phone"></mu-icon>
            修改手机
            </mu-button>
            
       </div>



    </div>
</template>
<script>
import axios from "axios";
import "muse-ui-message/dist/muse-ui-message.css";
import Message from "muse-ui-message";
import Toast from "muse-ui-toast";
export default {
  data() {
    axios.get("/api/user/getUserMsg").then(result => {
      let user = result.data;
      this.username = user.username;
      this.name = user.name;
      this.sex = user.radio;
      this.phone = user.phone;
      this.cname = user.cname;
      this.avatar = user.avatar;
    });
    return {
      set: false,
      username: "",
      name: "",
      sex: "",
      phone: "",
      cname: "",
      avatar: "",
      openSimple: false,
      token: {},
      // 七牛云的上传地址，华南区
      domain: "https://upload-z2.qiniup.com",
      // 这是七牛云空间的外链默认域名
      qiniuaddr: "p9zybqbtm.bkt.clouddn.com"
    };
  },

  methods: {
    setU() {
      if (this.set == false) {
        this.set = true;
      } else {
        this.set = false;
      }
    },
    resetname() {
      Message.prompt("输入你要修改的昵称", "提示").then(({ result, value }) => {
        if (result) {
          axios.post("/api/user/resetName", { name: value }).then(result => {
            if (result.data == "修改成功") {
              console.log("修改成功");
              Toast.success("修改成功");
              this.set = false;
              this.name = value;
            } else {
              console.log("修改失败");
              Toast.error("修改失败");
              this.set = false;
            }
          });
        } else {
          console.log("取消");
        }
      });
    },
    resetphone() {
      Message.prompt("输入修改的手机号码", "提示").then(({ result, value }) => {
        if (result) {
          console.log(value);
          axios.post("/api/user/resetPhone", { phone: value }).then(result => {
            if (result.data == "修改成功") {
              Toast.success("修改成功");
              this.set = false;
              this.phone = value;
            } else {
              console.log("修改失败");
              Toast.error("修改失败");
              this.set = false;
            }
          });
        } else {
          console.log("取消");
        }
      });
    },
    resetavatar() {
      console.log("修改头像");
      this.openSimple = true;
    },
    closeSimpleDialog() {
      this.openSimple = false;
    },

    // 上传文件到七牛云

    upqiniu(req) {
      console.log(req);
      const config = {
        headers: { "Content-Type": "multipart/form-data" }
      };
      let filetype = "";
      if (req.file.type === "image/png") {
        filetype = "png";
      } else {
        filetype = "jpg";
      }
      // 重命名要上传的文件
      const keyname =
        "adver" +
        +new Date() +
        Math.floor(Math.random() * 100) +
        "." +
        filetype;
      // 从后端获取上传凭证token
      axios.get("/api/token").then(res => {
        console.log(res);
        const formdata = new FormData();
        formdata.append("file", req.file);
        formdata.append("token", res.data);
        formdata.append("key", keyname);
        // 获取到凭证之后再将文件上传到七牛云空间
        axios.post(this.domain, formdata, config).then(res1 => {
          let pic_url = "http://" + this.qiniuaddr + "/" + res1.data.key;

          axios.post("/api/user/setAvatar", { pic_url }).then(keepres => {
            console.log("OK");
          });
          this.avatar =
            "http://" +
            this.qiniuaddr +
            "/" +
            res1.data.key +
            "?v=" +
            Math.floor(Math.random() * 100);
          this.set = false;
          Toast.success("修改成功");
        });
      });
    },
    // 验证文件合法性
    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        console.log("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        console.log("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    }
  }
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>